<!--
 * @Author: Wangtao
 * @Date: 2022-08-09 17:23:08
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-21 16:58:38
-->
<template>
  <div class="card-list-box mc-call-variable">
    <div class="card-list-tit">通话卡片</div>
    <div class="card-list-con">
      <div class="card-item-box">
        <el-scrollbar>
          <div
            :class="{ 'card-item-active': item.superUniqueId === callId }"
            class="card-item"
            v-for="(item, index) in cardList"
            :key="index"
            @click="handleCardClick(item.superUniqueId)"
          >
            <!-- <div class="close"><i class="MC_iconfont MC_icon-zhuangtai-guanbi"></i></div> -->
            <div class="card-item-top card-item-flex">
              <div class="name">
                <i :class="['MC_iconfont', getCardType(item.callEvent)]"></i>
                <div class="text">{{ item.customerName ? item.customerName : item.customerPhone }}</div>
              </div>
              <div class="card-time">{{ timestampFormat(item.statusTime) }}</div>
            </div>
            <div class="card-item-bottom card-item-flex">
              <div class="address">
                {{ item.customerCountry ? item.customerCountry : '未知地点' }} {{ item.customerProvince }}
              </div>
              <div class="state">{{ getTypeText(item.callType) }}</div>
            </div>
          </div>
          <div class="empty" v-if="cardList.length <= 0"><span>暂无卡片</span></div>
        </el-scrollbar>
      </div>
      <div class="card-list-tip">
        <span>最多展示20条</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import { callCardModule } from '@/common/store/modules/call-card'
import { newDate } from '@/common/utils/common'

const zeroize = (num: number) => {
  return (String(num).length === 1 ? '0' : '') + num
}

export default defineComponent({
  name: 'RecentCalls',
  components: {},
  // ----------------生命周期-----------------------
  setup() {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const router = useRouter()
    const route = useRoute()
    const CALLCARD = callCardModule()

    const morkList = [
      { _id: '63083d63044c346f77efe37d' },
      { _id: '63083d63044c346f77efe371' },
      { _id: '63083d63044c346f77efe372' },
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting',
      'MC_icon-yijieting',
      'MC_icon-zhenling',
      'MC_icon-weijieting'
    ]
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    const timestampFormat = (timestamp: string) => {
      const callTimstamp = new Date(timestamp).getTime() / 1000
      const tamp: any = newDate().getTime() / 1000
      const curTimestamp = parseInt(tamp, 10) // 当前时间戳
      const timestampDiff = curTimestamp - callTimstamp // 参数时间戳与当前时间戳相差秒数

      const curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
      const tmDate = new Date(callTimstamp * 1000) // 参数时间戳转换成的日期对象

      const Y = tmDate.getFullYear()
      const m = tmDate.getMonth() + 1
      const d = tmDate.getDate()
      const H = tmDate.getHours()
      const i = tmDate.getMinutes()
      if (timestampDiff < 60) {
        // 一分钟以内
        return '刚刚'
      } else if (timestampDiff < 3600) {
        // 一小时前之内
        return Math.floor(timestampDiff / 60) + '分钟前'
      } else if (curDate.getFullYear() === Y && curDate.getMonth() + 1 === m && curDate.getDate() === d) {
        return '今天' + zeroize(H) + ':' + zeroize(i)
      } else {
        const newDate1 = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
        if (newDate1.getFullYear() === Y && newDate1.getMonth() + 1 === m && newDate1.getDate() === d) {
          return '昨天' + zeroize(H) + ':' + zeroize(i)
        } else if (curDate.getFullYear() === Y) {
          return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        } else {
          return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        }
      }
    }
    const methods: any = reactive({
      handleCardClick(index: number) {
        router.push({ path: `/app/card_info/${index}` })
      },
      getTypeText(type: string) {
        let text = '未知类型'
        if (type === 'dialout') {
          text = '外呼'
        } else if (type === 'incoming') {
          text = '呼入'
        } else if (type === 'consultTransfer') {
          text = '咨询转移'
        } else if (type === 'transfer') {
          text = '呼叫转移'
        } else if (type === 'webcall') {
          text = '双向回呼'
        } else if (type === 'previewDialout') {
          text = '预览外呼'
        } else if (type === 'autoDialout') {
          text = '自动外呼'
        }
        return text
      }
    })

    const callId: any = computed(() => {
      return route.params.id ? route.params.id : ''
    })

    const cardList: any = computed(() => {
      return CALLCARD.list
    })

    const getCardType = (type: any) => {
      let typeIcon = ''
      switch (type) {
        case 'link':
          typeIcon = 'MC_icon-hujiaozhongxin'
          break
        case 'ring':
          typeIcon = 'MC_icon-zhenling'
          break
        case 'Answered':
          typeIcon = 'MC_icon-yijieting'
          break
        case 'noAnswered':
          typeIcon = 'MC_icon-weijieting'
          break
        case 'calling':
          typeIcon = 'MC_icon-hujiaozhongxin'
          break
        default:
          typeIcon = 'MC_icon-hujiaozhongxin'
          break
      }
      return typeIcon
    }

    onBeforeMount(async () => {
      await CALLCARD.getCardListByLocal()
    })

    return {
      morkList,
      timestampFormat,
      ...toRefs(methods),
      callId,
      cardList,
      getCardType
    }
  }
})
</script>
<style lang="stylus">
.card-list-box
  .el-scrollbar__bar.is-vertical
    width 4px
    .el-scrollbar__thumb
      background-color var(--mc-gray4-color)
      opacity 1
</style>
<style lang="stylus" scoped>
.detail
  width 100%
  height 100%
  padding 0 24px 0
  box-sizing border-box
  .btn
    width 24px
    height 24px
    background red
    display flex
    align-items center
    justify-content center
    margin-left 16px
    background-color var(--mc-gray3-color)
    color rgba(0, 0, 0, 0.88)
    border-radius 4px
    .MC_iconfont
      font-size 16px
  .circular
    border-radius 50%
    color white
  .customer-info
    padding 24px 0 24px
    box-sizing border-box
    .customer-info-box
      padding 16px 20px 16px
      box-sizing border-box
      background-color var(--el-fill-color-lighter)
      .customer-box-bottom
        margin-top 12px
        display flex
        .phone-info
          color rgba(0, 0, 0, 0.88)
        > div
          font-weight 400
          font-size 14px
          margin-right 40px
          color rgba(0, 0, 0, 0.6)
      .customer-box-top
        display flex
        justify-content space-between
        align-items center
        .customer-box-top-left
          display flex
          align-items center
          .name
            font-weight 500
            font-size 20px
          .oprate
            display flex
            .call
              background-color var(--mc-call-color-connect)
            .sms
              background-color var(--mc-call-color-ringing)
</style>
<style lang="stylus" scoped>
.card-list-box
  width 280px
  background var(--el-fill-color-lighter)
  flex 1
  overflow hidden
  border-top 1px solid var(--mc-gray3-color)
  box-sizing border-box
  .card-list-tit
    height 44px
    box-sizing border-box
    display flex
    align-items center
    font-style normal
    font-weight 400
    font-size 14px
    padding 0 20px 0
  .card-list-con
    height calc(100% - 44px)
    .card-list-tip::before
      content ''
      left 0
      right 0
      top 0
      bottom 0
      display block
      position absolute
      height 0
      width 90%
      border-bottom 1px dashed rgba(0, 0, 0, 0.26)
      margin auto
      z-index 0
    .card-list-tip
      height 34px
      display flex
      justify-content center
      align-items center
      color rgba(0, 0, 0, 0.26)
      font-weight 400
      font-size 12px
      position relative
      padding 0 16px 0
      > span
        z-index 2
        position relative
        background-color var(--el-fill-color-lighter)
        padding 0 8px 0
    .card-item-box
      height calc(100% - 34px)
      position relative
      .empty
        position: absolute
        width: 100%
        height: 100%
        display: flex
        flex-direction: column
        justify-content: center
        align-content: center
        text-align: center
      .card-item
        width 100%
        cursor pointer
        box-sizing border-box
        padding 20px 12px 20px
        display flex
        flex-direction column
        position relative
        .close
          position absolute
          width 16px
          height 16px
          background-color var(--mc-call-color-missed)
          color: white
          right 0
          top 0
          border-bottom-left-radius: 8px
          display: none
          .MC_iconfont
            font-size 8px
        .card-item-flex
          display flex
          width 100%
          justify-content space-between
          align-items center
        .card-item-top
          margin-bottom 8px
          flex 1
          .name
            font-size 20px
            font-weight 500
            display flex
            flex 1
            max-width 75%
            align-items center
            .text
              flex 1
              word-break keep-all /* 不换行 */
              white-space nowrap /* 不换行 */
              overflow hidden
              text-overflow ellipsis
              width calc(100% - 25px)
              font-size 14px
            .MC_iconfont
              font-size 16px
              margin-right 4px
            .MC_icon-zhenling
              color var(--mc-call-color-ringing)
            .MC_icon-yijieting
              color var(--mc-call-color-connect)
            .MC_icon-weijieting
              color var(--mc-call-color-missed)
            .MC_icon-hujiaozhongxin
              color var(--mc-call-color-connect)
          .card-time
            font-size 12px
            font-weight 400
            color rgba(0, 0, 0, 0.38)
        .card-item-bottom
          .address
            font-size 12px
            font-weight 400
            color rgba(0, 0, 0, 0.6)
          .state
            height 18px
            display flex
            align-items center
            justify-content center
            border-radius 9px
            box-sizing border-box
            border 1px solid rgba(229, 233, 235, 1)
            font-size 12px
            font-weight 400
            padding 0 6px 0
    .card-item:after
      content ''
      background var(--mc-call-color-idle)
      display block
      position absolute
      height 0
      width 2px
      top 0px
      right 0px
      bottom 0
      margin auto
      transition all 0.2s ease-out
    .card-item:hover
      background-color #fff
      &:after
        height 100%
        display block
      .close
        display: flex
        align-items: center
        justify-content: center
    .card-item-active
      background-color #fff
      &:after
        height 100%
        display block
</style>
